<template>
  <div id="login">
    <div class="login-shell">
      <div class="login-left-part"></div>
      <div class="login-right-part">
        <div class="center-content-of-login-right">
          <div id="login-header">
            <p>开网店，</p>
            <p>------- 就上<b>329</b></p>
          </div>
          <login-box />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginBox from "../components/LoginBox.vue";

export default {
  components: { LoginBox },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global";
#login {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .login-shell {
    width: 100%;
    height: 100%;
    min-width: $minWid;
    min-height: $minHgt;
  }
  .login-left-part {
    float: left;
    width: 50%;
    height: 100%;
    background: url("../assets/img/bg2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -5px -85px;
  }
  .login-right-part {
    float: left;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    #login-header {
      margin-bottom: 25px;
      p {
        color: $theme;
      }
      :first-child {
        font-size: xx-large;
      }
      :nth-child(2) {
        font-size: x-large;
      }
    }
  }
}
</style>